import {Utils} from './common.js'
import {WIDGET_TYPE} from './widget-const.js';
import TextWidget from './text-widget.js'

class TabComponent {
    constructor() {

        this._labelElem = Utils.CreateHTMLElement(`<li class="nav-item" role="presentation">
    <button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>`);
        this._contentElem = Utils.CreateHTMLElement(`<div class="tab-pane fade show" id="home" role="tabpanel" aria-labelledby="home-tab"></div>`);
        this._contentString = '';
    }

    Edit() {
        this._contentElem.innerText = this._contentString;
        this._contentElem.contentEditable = true;
    }

    View() {
        this._contentElem.innerHTML = this._contentString;
        this._contentElem.contentEditable = false;
    }
}

export default class TabWidget extends TextWidget {
    constructor(sectionData, dispatcher) {
        super(sectionData, dispatcher);
        this._labelContainerElem = Utils.CreateHTMLElement(`<ul class="nav nav-tabs" id="myTab" role="tablist"></ul>`);
        this._contentContainerElem = Utils.CreateHTMLElement(`<div class="tab-content" id="myTabContent"> </div>`);

        this._a = new TabComponent();

        this._editContainerElem.append(_tempElem);
    }
    get sectionData() {
        this._sectionData.type = WIDGET_TYPE.TAB;
        return this._sectionData;
    }
    get language() {return 'javascript';}
    _UpdateView() {
        this._imgElem.src = this._dataTobeParse.path;
        if(this._dataTobeParse.caption) {
            this._imgCaptionElem.innerText = this._dataTobeParse.caption;
            this._tmpElem.append(this._imgCaptionElem);
        } else {
            this._tmpElem.removeChild(this._imgCaptionElem);
        }
        return true;
    }

    _UpdateEdit() {
        this._inputPathElem.value = this._dataTobeParse.path;
        this._captionElem.value = this._dataTobeParse.caption;
        return true;
    }
};

